import { Component, EventEmitter, Input, Output } from '@angular/core';
import { RestoreService } from './hierachical-DI-restore.service';
import { Hero } from './hierachical-DI-hero';
@Component({
    selector: 'guide-hero-editor',
    providers: [RestoreService],
    template: `
    <div>
      <span>Name:</span>
      <input [(ngModel)]="hero.name"/>
      <div>
        <button (click)="onSaved()">save</button>
        <button (click)="onCanceled()">cancel</button>
      </div>
    </div>`
})
export class HeroEditorComponent {
    @Output() canceled = new EventEmitter();
    @Output() saved = new EventEmitter();
    constructor(private restoreService: RestoreService<Hero>) { }
    @Input()
    set hero(hero: Hero) {
        this.restoreService.setItem(hero);
    }
    get hero() {
        return this.restoreService.getItem();
    }
    onSaved() {
        this.saved.next(this.restoreService.getItem());
    }
    onCanceled() {
        this.hero = this.restoreService.restoreItem();
        this.canceled.next(this.hero);
    }
}
